<template>
    <view class="page">
        <view class="status_bar">
            <view class="bar-bg"></view>
        </view>
        <view :class="{header:true,ipx:false,official:true}">
            <view :class="{'mp-wrap':true,ipx:false}">
                <view class="mp-logo">
                    <image src="../../static/images/common/logo.jpg"></image>
                </view>
                <view class="info">
                    <view class="name">点餐</view>
                    <view class="desc">关注公众号，下次可在公众号中点餐！</view>
                    <view class="focus" @click="pushPage('/pages/main/focus')">关注</view>
                </view>
            </view>
        </view>
        <view class="business-wrap">
            <view class="business-info">
                <view class="business-logo">
                    <image :src="shopInfo.logo"></image>
                </view>
                <view class="business-name">{{shopInfo.branch_shop_name?shopInfo.branch_shop_name:''}}</view>
                <view class="notice">公告： {{shopInfo.notice?shopInfo.notice:""}}</view>
                <view class="home" @click="replacePage('/pages/main/main')"></view>
            </view>
        </view>
        <view class="tags">
            <view class="item-wrap">
                <view :class="{item:true,active:goodsAction}" @click="changeTab(true,false)">点餐</view>
                <view :class="{item:true, active:businessAction}" @click="changeTab(false,true)">商家</view>
            </view>
            <view class="tags-handle">
                <view class="myorder" @click="goMyOrder()">
                    <view class="myorder-icon"></view>
                    <view class="text">订单</view>
                </view>
                <view class="line"></view>
                <view class="my" @click="pushPage('/pages/my/index?branch_shop_id='+branch_shop_id+'&table_code='+table_code+'')"></view>
            </view>
        </view>
        <goods :isShow="goodsAction" :branchShopId="branch_shop_id" :gid="gid" :classifysData="classifys" :goodsData="goods" :shelfGoods="shelfGoods" @showGoodsDetails="showGoodsDetails" @incAmount="incAmount" :amount="amount" @decAmount="decAmount" @showAmountInput="showAmountInput" @setAmount="setAmount"></goods>
        <business-info :isShow="businessAction" :branchShopId="branch_shop_id" :infoData="shopInfo"></business-info>
        <!--只有在菜品展示组件显示的情况下，才显示购物车导航-->
        <view class="cart-main" v-show="goodsAction">
            <view class="handle-cart" @click="showCart">
                <view class="cart-cle">
                    <view class="cart-cle-2">
                        <view class="cart-icon" id="cart-icon">
                            <view class="badge" v-show="cartCount>0">{{cartCount}}</view>
                        </view>
                    </view>
                </view>
                <view class="total">￥{{total}}</view>
            </view>
            <view class="line"></view>
            <view class="submit" @click="submitOrder()">
                <template v-if="cartCount>0">提交订单 &gt;</template>
                <template v-else>未选购商品</template>
            </view>
        </view>
        <cart :show="setIsCart" @close="isCart=false" :cart-data="cartData" @incAmount="incAmount" @clearCart="clearCart" @decAmount="decAmount" @setAmount="setAmount"></cart>
    </view>
</template>

<script>
    import {mapActions,mapState,mapMutations,mapGetters} from "vuex";
    import Goods from "../../components/goods";
    import BusinessInfo from "../../components/business/info";
    import Cart from "../../components/cart";
    export default {
        name: "goods",
        data(){
            return {
                goodsAction:true,//是否显示菜品展示组件
                businessAction:false,//是否显示商家信息组件
                branch_shop_id:"",//分店的id
                table_code:"",//桌号
                gid:"",//菜品的id
                shelfGoods:false, //是否有上架或下架的菜品
                amount:0,//菜品的数量
                isCart:false//是否显示购物车组件
            }
        },
        onLoad(opts){
            //分店的id
            this.branch_shop_id=opts.branch_shop_id?opts.branch_shop_id:"";
            //桌号
            this.table_code=opts.table_code?opts.table_code:"";
            //获取菜品的id
            this.gid=opts.gid?opts.gid:"";
            //获取商家信息
            this.getShopInfo({branch_shop_id:this.branch_shop_id});
            this.getClassifys({branch_shop_id:this.branch_shop_id,complete:()=>{
                this.getGoods({branch_shop_id:this.branch_shop_id})
            }});
            //如果有桌号代表堂内，否则代表自提
            this.SET_PACK({isPack:this.table_code?false:true});
        },
        onShow(){
            if(this.goods && this.goods.length>0){
                this.getNewGoods({branch_shop_id:this.branch_shop_id,success:(data)=>{
                    for(let i=0;i<this.goods.length;i++){
                        //有新上架或下架的菜品
                        if(this.goods[i].goods.length!=data[i].goods.length){
                            this.shelfGoods=true;
                            //将菜品数据设置为空，然后再重新获取数据，解决scroll-view不会重新计算高度的问题
                            this.SET_GOODS({goods:[]})
                            //重新获取最新的菜品
                            this.getGoods({branch_shop_id:this.branch_shop_id})
                        }
                    }
                }})
            }
            this.showCartData({branch_shop_id:this.branch_shop_id,table_code:this.table_code})
        },
        components:{
            Goods,
            BusinessInfo,
            Cart
        },
        computed:{
            ...mapState({
                shopInfo:state=>state.business.shopInfo,
                classifys:state=>state.goods.classifys,
                goods:state=>state.goods.goods,
                isLogin:state=>state.user.isLogin,
                cartCount:state=>state.cart.cartCount,
                cartData:state=>state.cart.cartData
            }),
            ...mapGetters({
                total:"cart/total"
            }),
            setIsCart(){
                if(this.cartData.length>0){
                    return this.isCart;
                }else{
                    this.isCart=false;
                    return this.isCart;
                }
            }
        },
        methods:{
            ...mapActions({
                getShopInfo:"business/getShopInfo",//获取商家信息
                getClassifys:"goods/getClassifys", //获取菜品分类
                getGoods:"goods/getGoods", //获取菜品
                getNewGoods:"goods/getNewGoods",//菜品上架或下架
                addCart:"cart/addCart",//添加购物车
                showCartData:"cart/showCartData",//显示购物车里面的数据
                asyncClearCart:"cart/clearCart",//清空购物车
                delCart:"cart/delCart", //减少和删除购物车里的菜品
                asyncSetAmount:"cart/setAmount"//更新购物车数量
            }),
            ...mapMutations({
                SET_GOODS:"goods/SET_GOODS",//设置菜品数据
                SET_PACK:"cart/SET_PACK",
                SHOW_AMOUNT_INPUT:"goods/SHOW_AMOUNT_INPUT",
                HIDE_AMOUNT_INPUT:"goods/HIDE_AMOUNT_INPUT",
                SET_GOODS_AMOUNT:"goods/SET_AMOUNT"
            }),
            //菜品展示组件与商家信息组件切换显示
            changeTab(goodsAction,businessAction){
                this.goodsAction=goodsAction;
                this.businessAction=businessAction;
            },
            replacePage(url){
                uni.redirectTo({
                    url
                })
            },
            pushPage(url){
               uni.navigateTo({
                   url
               })
            },
            //显示菜品详情组件
            showGoodsDetails(gid,isMeal,amount,sellStatus,stock){
                if(sellStatus=='1' && stock>0){
                    if(isMeal=='1'){//如果是套餐
                        this.pushPage(`/pages/goods/meal?gid=${gid}&branch_shop_id=${this.branch_shop_id}&table_code=${this.table_code}`);
                    }else{//非套餐
                        this.gid=gid;
                        this.amount=amount;
                    }
                }
            },
            //增加菜品数量
            incAmount(gid,newMealItems,mealItems){
                if(this.isLogin){//会员已登录
                    this.$utils.safeUser(this,this.branch_shop_id,this.table_code,()=>{
                        let isGoodsSame=false;//是否有相同的菜品
                        //套餐里菜品明细的gid，用于添加购物车判断是否有相同的数据
                        let curNewMealItems=(newMealItems && newMealItems.length>0)?JSON.stringify(newMealItems):"";
                        for(let i=0;i<this.goods.length;i++){
                            for(let j=0;j<this.goods[i].goods.length;j++){
                                let new_meal_items=(this.goods[i].goods[j].new_meal_items && this.goods[i].goods[j].new_meal_items.length>0)?JSON.stringify(this.goods[i].goods[j].new_meal_items):"";
                                //是否有相同的菜品或套餐
                                if(this.goods[i].goods[j].gid==gid && curNewMealItems==new_meal_items){
                                    isGoodsSame=true;
                                    //增加菜品的数量，这里的数量会传递给菜品详情组件，这样就可以同步了
                                    this.amount=parseInt(this.goods[i].goods[j].amount)+1;
                                     //添加购物车数据到vuex
                                     let cartData={
                                        "title":this.goods[i].goods[j].title,//菜品和套餐的名称
                                        "branch_shop_id":this.branch_shop_id,//分店的id
                                        "table_code":this.table_code,//桌号
                                        "gid":gid,//菜品和套餐的唯一标识
                                        "price":this.goods[i].goods[j].price,//价格
                                        "amount":1,//菜品的数量
                                        "is_meal":this.goods[i].goods[j].is_meal,//是否套餐
                                        "pack_price":this.goods[i].goods[j].pack_price?this.goods[i].goods[j].pack_price:0,//包装费
                                        "meal_type":0,//套餐的类型。0：普通套餐，1：自定义套餐
                                        "meal_items":this.goods[i].goods[j].meal_items,//套餐里菜品的明细
                                        "new_meal_items":this.goods[i].goods[j].new_meal_items,//套餐里菜品明细的gid
                                        "isAmountInput":false,//是否显示数量input输入框
                                        "isAmountInputFocus":false,//是否获取input焦点
                                     };
                                    this.addCart({cartData})
                                    break;
                                }
                            }
                        }
                        if(!isGoodsSame){//没有相同的菜品，表示自定义套餐
                            //添加购物车数据到vuex
                            let cartData={
                            "branch_shop_id":this.branch_shop_id,//分店的id
                            "table_code":this.table_code,//桌号
                            "gid":gid,//菜品和套餐的唯一标识
                            "amount":1,//菜品的数量
                            "is_meal":1,//是否套餐
                            "meal_type":1,//套餐的类型。0：普通套餐，1：自定义套餐
                            "meal_items":mealItems,//套餐里菜品的明细
                            "new_meal_items":newMealItems,//套餐里菜品明细的gid
                            "isAmountInput":false,//是否显示数量input输入框
                            "isAmountInputFocus":false,//是否获取input焦点
                            };
                            this.addCart({cartData})
                        }
                    });
                }else{//会员未登录
                    this.pushPage('/pages/login/index?branch_shop_id='+this.branch_shop_id+'&table_code='+this.table_code+'');
                }
            },
            //减少菜品数量
            decAmount(gid,newMealItems,mealItems){
                if(this.isLogin){//会员已登录
                    this.$utils.safeUser(this,this.branch_shop_id,this.table_code,()=>{
                        let isGoodsSame=false;//是否有相同的菜品
                        //套餐里菜品明细的gid，用于添加购物车判断是否有相同的数据
                        let curNewMealItems=(newMealItems && newMealItems.length>0)?JSON.stringify(newMealItems):"";
                        for(let i=0;i<this.goods.length;i++){
                            for(let j=0;j<this.goods[i].goods.length;j++){
                                let new_meal_items=(this.goods[i].goods[j].new_meal_items && this.goods[i].goods[j].new_meal_items.length>0)?JSON.stringify(this.goods[i].goods[j].new_meal_items):"";
                                //是否有相同的菜品或套餐
                                if(this.goods[i].goods[j].gid==gid && curNewMealItems==new_meal_items){
                                    isGoodsSame=true;
                                    this.goods[i].goods[j].amount=parseInt(this.goods[i].goods[j].amount)>0?parseInt(this.goods[i].goods[j].amount)-1:0
                                    //减少菜品的数量，这里的数量会传递给菜品详情组件，这样就可以同步了
                                    this.amount=this.goods[i].goods[j].amount;
                                     this.$set(this.goods[i].goods,j,this.goods[i].goods[j]);
                                     this.delCart({cartData:this.goods[i].goods[j],branch_shop_id:this.branch_shop_id,meal_type:0})
                                    break;
                                }
                            }
                        }
                        if(!isGoodsSame){//没有相同的菜品，表示自定义套餐
                            this.delCart({cartData:{gid:gid,new_meal_items:newMealItems,meal_items:mealItems},branch_shop_id:this.branch_shop_id,meal_type:1})
                        }
                    });
                }else{//会员未登录
                    this.pushPage('/pages/login/index?branch_shop_id='+this.branch_shop_id+'&table_code='+this.table_code+'');
                }
            },
            //修改数量
            setAmount(e,gid,newMealItems,mealItems,index,index2){
                let amount=e.target.value;
                this.amount=amount;
                //设置菜品的数量
                this.SET_GOODS_AMOUNT({amount:amount,gid:gid,new_meal_items:newMealItems});
                this.asyncSetAmount({branch_shop_id:this.branch_shop_id,cartData:{amount:amount,gid:gid,new_meal_items:newMealItems,meal_items:mealItems}});
                if(index!=undefined && index2!=undefined){
                    this.HIDE_AMOUNT_INPUT({index,index2});
                }
            },
            //显示购物车组件
            showCart(){
                if(this.isLogin){//会员已登录
                    this.$utils.safeUser(this,this.branch_shop_id,this.table_code,()=>{
                        this.isCart=true;
                    })
                }else{
                    this.pushPage('/pages/login/index?branch_shop_id='+this.branch_shop_id+'&table_code='+this.table_code+'');
                }
            },
            //清空购物车
            clearCart(){
                if(this.isLogin){//会员已登录
                    this.$utils.safeUser(this,this.branch_shop_id,this.table_code,()=>{
                        if(this.cartCount>0){//如果购物车里有菜品
                            //清空购物车服务端数据
                            this.asyncClearCart({branch_shop_id:this.branch_shop_id,table_code:this.table_code})
                        }
                    })
                }else{
                    this.pushPage('/pages/login/index?branch_shop_id='+this.branch_shop_id+'&table_code='+this.table_code+'');
                }
            },
            //显示input输入框
            showAmountInput(index,index2){
                this.SHOW_AMOUNT_INPUT({index,index2})
            },
            //提交订单
            submitOrder(){
                if(this.isLogin){//会员已登录
                    this.$utils.safeUser(this,this.branch_shop_id,this.table_code,()=>{
                        if(this.cartCount>0){//如果购物车里有菜品
                            this.pushPage(`/user_pages/order/index?branch_shop_id=${this.branch_shop_id}&table_code=${this.table_code}`);
                        }
                    })
                }else{
                    this.pushPage('/pages/login/index?branch_shop_id='+this.branch_shop_id+'&table_code='+this.table_code+'');
                }
            },
            //跳转到我的订单页面
            goMyOrder(){
                if(this.isLogin){//会员已登录
                    this.$utils.safeUser(this,this.branch_shop_id,this.table_code,()=>{
                        this.pushPage(`/pages/myorder/index?branch_shop_id=${this.branch_shop_id}&table_code=${this.table_code}`);
                    })
                }else{
                    this.pushPage('/pages/login/index?branch_shop_id='+this.branch_shop_id+'&table_code='+this.table_code+'');
                }
            }
        },
        //分享小程序
		onShareAppMessage(res) {
			return {
				title: this.shopInfo.branch_shop_name,
				path: '/pages/goods/index?branch_shop_id='+this.branch_shop_id+'&table_code='+this.table_code
			}
		},
    }
</script>

<style scoped>
    .page{width:100%;height:100vh;overflow:hidden;position: relative;}
    .header{width:100%;height:230rpx;background-color:#E30019;position:relative;z-index:1;}
    /* #ifndef H5 */
    .header.official{height:280rpx;}
    /* #endif */
    .business-wrap{width:100%;height:100rpx;position:relative;z-index:1;}
    .header.ipx.official{height:320rpx;}
    .status_bar{background-color:#E30019}
    .status_bar .bar-bg{width:90%;height:100%;background-color:#FFFFFF;margin:0 auto;}
    .business-wrap .business-info{width:90%;height:180rpx;background-color:#FFFFFF;position: absolute;z-index:1;left:50%;top:-80rpx;transform: translateX(-50%);box-shadow: 3px 3px 5px #efefef;border-radius: 5px;}
    .business-wrap .home{width:50rpx;height:50rpx;position:absolute;right:15rpx;top:15rpx;z-index:1;background-image: url("~@/static/images/goods/home.png");background-size:100%;background-repeat: no-repeat;background-position:center;}
    .business-wrap .business-logo{width:100rpx;height:100rpx;position:absolute;z-index:1;left:35rpx;top:15rpx;}
    .business-wrap .business-logo image{width:100%;height:100%;border-radius: 8px;}
    .business-wrap .business-name{width:450rpx;height:100rpx;font-size:36rpx;color:#333333;position: absolute;z-index:1;top:20rpx;left:156rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}
    .business-wrap .promotion{width:75%;height:60rpx;position:absolute;z-index:1;left:156rpx;top:80rpx;font-size:26rpx;color:#E30019;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;text-decoration: underline;}
    .business-wrap .notice{width:630rpx;height:60rpx;position:absolute;z-index:1;left:35rpx;top:130rpx;font-size:26rpx;color:#999999;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}
    .tags{width:100%;height:100rpx;display:flex;justify-content: space-between;align-items: center;padding:0px 25rpx;box-sizing: border-box;}
    .tags .item-wrap{width:auto;height:auto;display:flex;}
    .tags .item-wrap .item{width:auto;height:auto;color:#333333;font-size:28rpx;padding:10rpx 5rpx;margin-right:30rpx;}
    .tags .item-wrap .item.focus{color:#E30019}
    .tags .item-wrap .item.active{border-bottom: 2px solid #ffd161;font-weight:bold;}
    .tags .myorder{width:150rpx;height:100%;border-radius: 15px;background-color:#f5f5f5;display: flex;justify-content: center;align-items: center;margin-right:10rpx;}
    .tags .myorder-icon{width:40rpx;height:40rpx;background-image:url("~@/static/images/goods/myorder.png");background-size:100%;background-repeat: no-repeat;background-position: center;margin-right:10rpx;}
    .tags .myorder .text{color:#333333;font-size:28rpx;}
    .tags .tags-handle{display:flex;height:50rpx;}
    .tags .tags-handle .line{width:3px;height:100%;background-color:rgba(245,245,245,0.6);}
    .tags .tags-text{font-size:28rpx;color:#FFFFFF;margin-left:10rpx;border-radius: 5px;background-color:#E30019;padding:5rpx 10rpx;}
    .tags .my{width:40rpx;height:40rpx;background-image: url("~@/static/images/main/my.png");background-size:100%;background-repeat: no-repeat;background-position: center;margin-left:10rpx;}

    .cart-main{width:100%;height:100rpx;background-color:#f6ab00;position: fixed;z-index:90;left:0px;bottom:0px;}
    .cart-main .cart-cle{width:130rpx;height:130rpx;border-radius: 100%;background-color:#f6ab00;position:absolute;left:56rpx;top:-40rpx;}
    .cart-main .cart-cle-2{width:100rpx;height:100rpx;border-radius: 100%;position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);background-color:#F8CE86}
    .cart-main .cart-icon{width:60rpx;height:60rpx;background-image:url("~@/static/images/main/cart.png");background-size:100%;background-position:center;background-repeat: no-repeat;position: absolute;z-index:1;left:50%;top:50%;transform: translate(-50%,-50%); }
    .cart-main .badge{width:50rpx;height:50rpx;border-radius: 100%;background-color:#ff2400;position:absolute;right:-35rpx;top:-35rpx;font-size:24rpx;color:#FFFFFF;text-align: center;line-height:50rpx;white-space: nowrap;overflow:hidden;}
    .cart-main .total{font-size:36rpx;color:#FFFFFF;width:auto;height:auto;position:absolute;left:180rpx;top:50%;transform: translateY(-50%);}
    .cart-main .line{width:2px;height:62rpx;background-color:rgba(255,255,255,0.6);position:absolute;z-index:1;left:507rpx;top:50%;transform: translateY(-50%);}
    .cart-main .submit{width:175rpx;height:60rpx;position:absolute;z-index:1;right:30rpx;top:50%;transform: translateY(-50%);font-size:32rpx;color:#FFFFFF;line-height:60rpx;}
    .cart-main .handle-cart{width:65%;height:100%;}

    .mp-wrap{width:90%;margin:0 auto;height:180rpx;background-color:#FFFFFF;display:flex;justify-content: space-between;align-items: flex-end;box-sizing: border-box;padding:0px 20rpx;border-bottom-left-radius: 5px;border-bottom-right-radius:5px;overflow:hidden;}
    /* #ifdef H5 */
    .mp-wrap{height:140rpx;}
    /* #endif */
    .mp-wrap.ipx{height:220rpx;}
    .mp-wrap .mp-logo{width:80rpx;height:80rpx;margin-bottom:20rpx;}
    .mp-wrap .mp-logo image{width:100%;height:100%;border-radius: 8px;}
    .mp-wrap .info{width:84%;height:80rpx;position: relative;z-index:1;margin-bottom:20rpx;}
    .mp-wrap .info .name{width:auto;height:auto;font-size:28rpx;color:#5A5A5A;position:absolute;z-index:1;left:0px;top:0px;}
    .mp-wrap .info .desc{width:auto;height:auto;font-size:24rpx;color:#5A5A5A;position:absolute;z-index:1;left:0px;top:45rpx;}
    .mp-wrap .info .focus{width:auto;height:auto;border:1px solid #28A622;border-radius: 4px;font-size:28rpx;color:#28A622;position:absolute;z-index:1;right:0px;top:14rpx;padding:5rpx 20rpx;}

    /* #ifdef MP-WEIXIN */
    .mp-wrap2{width:100%;margin:0 auto;height:230rpx;background-color:#FFFFFF;display:flex;justify-content: center;align-items: flex-end;box-sizing: border-box;border-bottom-left-radius: 5px;border-bottom-right-radius:5px;overflow:hidden;margin-top:20rpx;}
    .mp-wrap2.ipx{height:250rpx;}
    /* #endif */
</style>
